<template>
    <div class="workbench">
        <div class="md:flex">
            <el-card class="!border-none mb-4 md:mr-4" shadow="never">
                <template #header>
                    <span class="card-title">平台收益</span>
                </template>
                <div>
                    <div class="flex leading-9">
                        <div class="w-20 flex-none">总收益</div>
                        <span> {{ workbenchData.pt_total }} 万</span>
                    </div>
                    <div class="flex leading-9">
                        <div class="w-20 flex-none">今日收益</div>
                        <span> {{ workbenchData.pt_today }} 万</span>
                    </div>
                </div>
            </el-card>
            <el-card class="!border-none mb-4 md:mr-4" shadow="never">
                <template #header>
                    <span class="card-title">管理公司收益</span>
                </template>
                <div>
                    <div class="flex leading-9">
                        <div class="w-20 flex-none">总收益</div>
                        <span> {{ workbenchData.areas_total }} 万</span>
                    </div>
                    <div class="flex leading-9">
                        <div class="w-20 flex-none">今日收益</div>
                        <span> {{ workbenchData.areas_today }} 万</span>
                    </div>
                </div>
            </el-card>
            <el-card class="!border-none mb-4 flex-1" shadow="never">
                <template #header>
                    <div>
                        <span class="card-title">管理信息</span>
                    </div>
                </template>

                <div class="flex flex-wrap">
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">管理公司(家)</div>
                        <div class="text-6xl"> {{ workbenchData.areas_num }} </div>
                    </div>
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">执行公司(家)</div>
                        <div class="text-6xl">{{ workbenchData.zx_areas_num }}</div>
                    </div>
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">代理公司(家)</div>
                        <div class="text-6xl">{{ workbenchData.dl_areas_num }}</div>
                    </div>
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">注册用户(位)</div>
                        <div class="text-6xl">{{ workbenchData.user_num }}</div>
                    </div>
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">入驻律师(位)</div>
                        <div class="text-6xl">{{ workbenchData.lawyer_num }}</div>
                    </div>
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">人民调解员(位)</div>
                        <div class="text-6xl">{{ workbenchData.rm_tjy_num }}</div>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="md:flex">
            <el-card class="!border-none mb-4 md:mr-4" shadow="never">
                <template #header>
                    <span class="card-title">案件数量</span>
                </template>
                <div>
                    <div class="flex leading-9">
                        <div class="w-20 flex-none">案件总金额</div>
                        <span> {{ workbenchData.entrust_case_total_amount }} 万</span>
                    </div>
                    <div class="flex leading-9">
                        <div class="w-20 flex-none">案件总数量</div>
                        <span> {{ workbenchData.entrust_case_total }} 件</span>
                    </div>
                </div>
            </el-card>
            <el-card class="!border-none mb-4 flex-1" shadow="never">
                <template #header>
                    <span>委托案件信息(件)</span>
                </template>
                <div class="flex flex-wrap">
                    <div class="w-1/4 md:w-1/8">
                        <div class="leading-10">委托总数</div>
                        <div class="text-6xl"> {{ workbenchData.total }} </div>
                    </div>
                    <div class="w-1/4 md:w-1/8">
                        <div class="leading-10">今日案件</div>
                        <div class="text-6xl">{{ workbenchData.today }}</div>
                    </div>
                    <div class="w-1/4 md:w-1/8">
                        <div class="leading-10">发布案件</div>
                        <div class="text-6xl">{{ workbenchData.yfb }}</div>
                    </div>
                    <div class="w-1/4 md:w-1/8">
                        <div class="leading-10">待接案件</div>
                        <div class="text-6xl">{{ workbenchData.djd }}</div>
                    </div>
                    <div class="w-1/4 md:w-1/8">
                        <div class="leading-10">已接案件</div>
                        <div class="text-6xl">{{ workbenchData.yjd }}</div>
                    </div>
                    <div class="w-1/4 md:w-1/8">
                        <div class="leading-10">待付案件</div>
                        <div class="text-6xl">{{ workbenchData.dfk }}</div>
                    </div>
                    <div class="w-1/4 md:w-1/8">
                        <div class="leading-10">完结案件</div>
                        <div class="text-6xl">{{ workbenchData.ywc }}</div>
                    </div>
                    <div class="w-1/4 md:w-1/8">
                        <div class="leading-10">委托临期</div>
                        <div class="text-6xl">{{ workbenchData.wtlq }}</div>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="md:flex">
            <el-card style="width: 30%; margin-right: 20px" shadow="never" class="!border-none">
<!--                <template #header>-->
<!--                    <span>案件状态统计</span>-->
<!--                </template>-->
                <div id="pie" style="width: 500px;height: 300px"></div>
            </el-card>
            <el-card style="width: 70%" shadow="never" class="!border-none">
                <template #header>
                    <span>调解案件信息</span>
                </template>
                <div class="flex flex-wrap">
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">调解总数(件)</div>
                        <div class="text-6xl"> {{ workbenchData.case_num }} </div>
                    </div>
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">今日调解总数(件)</div>
                        <div class="text-6xl">{{ workbenchData.case_today_num }}</div>
                    </div>
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">书记员数量(位)</div>
                        <div class="text-6xl">{{ workbenchData.system_auth_num }}</div>
                    </div>
                </div>
                <div class="flex flex-wrap">
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">待调案件</div>
                        <div class="text-6xl"> {{ workbenchData.dtj }} </div>
                    </div>
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">调解成功</div>
                        <div class="text-6xl">{{ workbenchData.tjcg }}</div>
                    </div>
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">调解失败</div>
                        <div class="text-6xl">{{ workbenchData.tjsb }}</div>
                    </div>
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">二次调解</div>
                        <div class="text-6xl">{{ workbenchData.ectj }}</div>
                    </div>
                    <div class="w-1/2 md:w-1/6">
                        <div class="leading-10">司法处理</div>
                        <div class="text-6xl">{{ workbenchData.sfcl }}</div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup name="workbench">
import { getWorkbench2 } from '@/api/app'
import vCharts from 'vue-echarts'
import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;


const echartsDisplay = async () => {
    option = {
        title: {
            text: '案件状态统计',
            subtext: '',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: '50%',
                data: workbenchData.pie,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // console.log("999999999999",workbenchData.pie);
    var chartDom = document.getElementById('pie')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;
    option && myChart.setOption(option);
}

// onMounted(()=> {
//     echartsDisplay()
// })

// 表单数据
const workbenchData: any = reactive({
    pt_total : '',
    pt_today : '',
    areas_total : '',
    areas_today : '',
    areas_num : '',
    zx_areas_num : '',
    dl_areas_num : '',
    user_num : '',
    lawyer_num : '',
    rm_tjy_num : '',
    entrust_case_total_amount : '',
    entrust_case_total : '',
    total : '',
    today : '',
    yfb : '',
    djd : '',
    yjd : '',
    dfk : '',
    ywc : '',
    wtlq : '',
    case_num : '',
    case_today_num : '',
    system_auth_num : '',
    dtj : '',
    tjcg : '',
    tjsb : '',
    ectj : '',
    sfcl : '',
    pie: ''
})

// 获取工作台主页数据
const getData = async () => {
    const res = await getWorkbench2()
    console.log(res);
    for (const key in workbenchData) {
        if (res[key] != null && res[key] != undefined) {
            //@ts-ignore
            workbenchData[key] = res[key]
        }
    }
    echartsDisplay();
}

getData()
</script>

<style lang="scss" scoped></style>
